<template>
  <div class="admin">
    <div class="admin-title">{{ t("customerService.title") }}</div>

    <div class="cs-wrapper">
      <el-card class="cs-card" shadow="hover">
        <div class="cs-header">
          <el-icon class="cs-title-icon"><ChatDotRound /></el-icon>
          <span class="cs-title">{{ t("customerService.wechat") }}</span>
        </div>

        <div class="cs-qr">
          <img :src="store.customer.code" :alt="store.customer.name" />
        </div>

        <el-button type="primary" class="cs-scan-btn" size="large">
          {{ t("customerService.scanTip") }}
        </el-button>

        <el-divider />

        <div class="cs-info">
          <div class="cs-info-item">
            <el-icon><Phone /></el-icon>
            <span>{{ t("customerService.phoneLabel") }}: {{ store.customer.phone }}</span>
          </div>
          <div class="cs-info-item">
            <el-icon><Message /></el-icon>
            <span>{{ t("customerService.emailLabel") }}: {{ store.customer.email }}</span>
          </div>
          <div class="cs-info-item">
            <el-icon><Clock /></el-icon>
            <span>{{ t("customerService.workTime") }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ChatDotRound, Phone, Message, Clock } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
import { appStore } from "~/composables/store/modules/app";

const { t } = useI18n();
const store = appStore();

definePageMeta({
  title: "联系客服",
  en_title: "customer service",
  zh_hk_title: "聯繫客服",
  ssr: true,
  isTokenCheck: true,
});

if (!store.siteInfo) {
  store.updateSiteInfo();
}
</script>

<style scoped lang="less">
.cs-wrapper {
  padding: 16px 0 32px;
}
.cs-card {
  width: 360px;
  text-align: center;
}
.cs-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}
.cs-title-icon {
  color: var(--el-color-primary);
}
.cs-qr {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}
.cs-qr img {
  width: 240px;
  height: 240px;
  border-radius: 6px;
  border: 1px solid var(--el-border-color-lighter);
}
.cs-scan-btn {
  width: 80%;
}
.cs-info {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding-bottom: 8px;
}
.cs-info-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-regular);
}
</style>
